<div id="newunitbox" style="color:white">
    <script type="text/javascript">
    function checkNewUnitboxId(e, id) {
        var pattern = new RegExp("[^a-z0-9]", "i");
        if (pattern.test(id)) {
            alert("Attention: invalid id, only alphanumeric chars admitted");
            e.target.focus();
            return false;
        }
        if (unitboxes.numbers[id] != undefined || unitboxes.expressions[id] != undefined || unitboxes.strings[id] != undefined || unitboxes.ranges[id] != undefined) {
            alert("Attention: id already exists in this docbox");
            e.target.focus();
            return false;
        }

        return true;
    }

    function checktype(e) {
        var e = new Event(e);
        if (e.target.options[e.target.selectedIndex].value == 'range') {
            $('newrangefunctions').setStyle("display", "block");
            $('unitbox_new_value').disabled = true;
        }
        else {
            $('newrangefunctions').setStyle("display", "none");
            $('unitbox_new_value').disabled = false;
        }
    }
    </script>
    <form id="form_new_unitbox" method="post" action="newunitbox" onsubmit="return false">
    <fieldset>
        <legend style="color:gray">CREATE NEW UNITBOX</legend>
    
        <div class="formel">
            <label for="unitbox_new_id" class="guiLabel">id</label>
            <input type="text" name="unitbox_new_id" id="unitbox_new_id" onblur="checkNewUnitboxId(event, this.value)" />
        </div>
        
        <div class="formel">
            <label for="unitbox_new_title" class="guiLabel">title</label>
            <input type="text" name="unitbox_new_title" id="unitbox_new_title" />
        </div>

        <div class="formel">
            <label for="unitbox_new_class" class="guiLabel">class</label>
            <select name="unitbox_new_class" id="unitbox_new_class" class="guiValue">
            <option value="number">number</option>
            <option value="expression">expression</option>
            <option value="string" selected="selected">string</option>
            <option value="range">range</option>
            <option value="result">result</option>
            </select>
        </div>

        <div class="formel">
            <div class="guiLabel">coordinates</div>
            <label for="unitbox_new_x" class="guiLabel">x:</label>
            <input type="text" name="unitbox_new_x" id="unitbox_new_x" size="2" />px<br />
            <label for="unitbox_new_y" class="guiLabel">y:</label>
            <input type="text" name="unitbox_new_y" id="unitbox_new_y" size="2" />px
        </div>
        
        <div class="formel">
            <label for="unitbox_new_type" class="guiLabel">type</label>
            <select name="unitbox_new_type" id="unitbox_new_type" class="guiValue" onchange="checktype(event)">
            <optgroup label="static types">
                <option value="string" selected="selected">string</option>
                <option value="number">number</option>
            </optgroup>
            <optgroup label="dynamic types">
                <option value="expression">expression</option>
                <option value="range">range</option>
            </optgroup>
            </select>
        </div>
        
        <div class="formel">
            <label for="unitbox_new_value" class="guiLabel">value</label><br />
            <textarea type="text" id="unitbox_new_value" name="unitbox_new_value" class="guiValue"></textarea>
        </div>
        
        <fieldset id="newrangefunctions" style="display:none">
        <div class="formel">
            <label for="unitbox_new_rangefrom">from</label> <input type="text" size="4" name="unitbox_new_rangefrom" id="unitbox_new_rangefrom" />
            <label for="unitbox_new_rangeto">to</label> <input type="text" size="4" name="unitbox_new_rangeto" id="unitbox_new_rangeto" />
        </div>
        <div class="formel">
            <label for="unitbox_new_rangestep">step</label> <input type="text" size="4" name="unitbox_new_rangestep" id="unitbox_new_rangestep" />
        </div>
        </fieldset>

        <div class="formel">
            <input type="button" value="CREATE UNITBOX" onclick="newUnitbox()" />
        </div>
    </fieldset>
    </form>
</div>